<template>
  <div class="bgys">
    <!-- 头部标题 -->
    <HeadMain :audioUrl="audioUrl" @bfwc="bfwc" />
    <!-- 任务栏 -->
    <div class="tool taskclosebox" @click="closefn" v-if="!erstepshow">
      <img src="@/images/taskclose.png" alt="" class="normal" />
      <img src="@/images/taskcloseac.png" alt="" class="active" />
    </div>
    <div class="taskbox beautifulScroll">
      <!-- 一级菜单 -->
      <div
        class="tool taskboxitem"
        v-for="item in taskdata"
        :key="item.id"
        @click="taskfn(item.id)"
        v-show="item.id == erstep || erstepshow"
      >
        <img
          src="@/images/taska.png"
          alt=""
          class="normal bgm"
          v-if="taskstep != item.id"
        />
        <img
          src="@/images/taskac.png"
          alt=""
          class="active bgm"
          v-if="taskstep != item.id"
        />
        <img
          src="@/images/taskac.png"
          alt=""
          v-if="taskstep == item.id"
          class="bgm"
        />
        <!-- 序号 -->
        <span class="taskitemid">{{ item.id }}</span>
        <!-- 名字 -->
        <span class="taskitemname">{{ item.name }}</span>
      </div>
      <!-- 二级菜单 -->
      <div class="erbox" v-if="!erstepshow">
        <div v-for="items in taskdata[erstep - 1].erdata" :key="items.id">
          <div
            :class="eritem == items.id ? 'erboxitem erboxitemac ' : 'erboxitem'"
            @click="erjifn(items.id)"
          >
            <span>{{ items.name }}</span>
          </div>
          <!--  三级菜单 变态反人类设计 当点击的二级菜单 = 三级菜单的时候才让他显示-->
          <div class="sjbox" v-if="eritem == items.id && sjbox">
            <div
              :class="itemsd.id == sjstep ? 'sjitemac sjitem' : 'sjitem'"
              v-for="itemsd in items.sandata"
              :key="itemsd.id"
              @click="sjstep = itemsd.id"
            >
              <span>{{ itemsd.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 准备步骤物品穿戴 -->
    <wp-tool
      v-if="taskstep == 1"
      :eritem="eritem"
      @tg="tg"
      @eritemfn="eritemfn"
    />
    <!-- 静脉采血步骤 -->
    <jmcx-bz
      ref="jmcxbz"
      @eritemfn="eritemfn"
      :eritem="eritem"
      v-if="taskstep == 2"
      @audioUrlfn="audioUrlfn"
      @taskfn="taskfn"
    />
    <!-- 酶免分析步骤 -->

    <!-- 场景文件 -->
    <seen
      :eritem="eritem"
      :eritems="eritems"
      :sjstep="sjstep"
      :taskstep="taskstep"
      ref="seen"
      @clickItem="clickItem"
      @tipstextfn="tipstextfn"
    />
    <!-- 步骤提示 -->
    <bz-tip :bztext="bztext" v-if="bztext" />
    <!-- 文字提示 -->
    <right-tips :tipstext="tipstext" v-if="tipstext" />
    <!-- 警示文字 -->
    <error-tips :errortext="errortext" v-if="errortext" />

    <!-- 签字 -->
  </div>
</template>

<script>
import { mixins } from '@/mixin/index'
import HeadMain from '@/components/headMain.vue'
import WpTool from '@/components/wpTool.vue'
import JmcxBz from '@/components/jmcxBz.vue'
import Seen from './seen.vue'
import BzTip from '@/components/bzTip.vue'
import RightTips from '@/components/rightTips.vue'
import ErrorTips from '@/components/errorTips.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//脑子坏掉了
export default {
  mixins: [mixins],
  //import引入的组件需要注入到对象中才能使用
  components: {
    HeadMain,
    WpTool,
    JmcxBz,
    BzTip,
    RightTips,
    ErrorTips,
    Seen
  },
  data() {
    //这里存放数据
    return {
      audioUrl: '',
      taskstep: 1, //当前所在一级分类
      taskdata: [
        {
          id: 1,
          name: '准备',
          erdata: [
            {
              id: 1,
              name: '穿工作服'
            },
            {
              id: 2,
              name: '洗手'
            },
            {
              id: 3,
              name: '戴口罩'
            },
            {
              id: 4,
              name: '戴手套'
            }
          ]
        },
        {
          id: 2,
          name: '静脉采血',
          erdata: [
            {
              id: 1,
              name: '采血前准备'
            },
            {
              id: 2,
              name: '核对患者信息'
            },
            {
              id: 3,
              name: '绑扎压脉带'
            },
            {
              id: 4,
              name: '采血点消毒'
            },
            {
              id: 5,
              name: '采血'
            },
            {
              id: 6,
              name: '拔针按压'
            },
            {
              id: 7,
              name: '标本处理'
            }
          ]
        },
        {
          id: 3,
          name: '开机检查',
          erdata: [
            {
              id: 1,
              name: '检查废液桶'
            },
            {
              id: 2,
              name: '检查试剂'
            },
            {
              id: 3,
              name: '检查液体管路'
            },
            {
              id: 4,
              name: '检查电源线'
            }
          ]
        },
        {
          id: 4,
          name: '开机'
        },
        {
          id: 5,
          name: '登录'
        },
        {
          id: 6,
          name: '检查试剂',
          erdata: [
            {
              id: 1,
              name: '查看试剂'
            },
            {
              id: 2,
              name: '设置试剂'
            },
            {
              id: 3,
              name: '修改试剂信息'
            }
          ]
        },
        {
          id: 7,
          name: '质控',
          erdata: [
            {
              id: 1,
              name: '点击质控'
            },
            {
              id: 2,
              name: '返回'
            },
            {
              id: 3,
              name: '质控分析'
            },
            {
              id: 4,
              name: '吸取质控物'
            },
            {
              id: 5,
              name: '开始吸样'
            },
            {
              id: 6,
              name: '查看质控图'
            },
            {
              id: 7,
              name: '返回上一级'
            },
            {
              id: 8,
              name: '查看质控列表'
            },
            {
              id: 9,
              name: '返回'
            }
          ]
        },
        {
          id: 8,
          name: '校准',
          erdata: [
            {
              id: 1,
              name: '校准'
            },
            {
              id: 2,
              name: '校准物校准'
            },
            {
              id: 3,
              name: '点击“校准物校准”'
            },
            {
              id: 4,
              name: '取出校准物'
            },
            {
              id: 5,
              name: '吸样'
            },
            {
              id: 6,
              name: '设置全血模式'
            },
            {
              id: 7,
              name: '审核'
            },
            {
              id: 8,
              name: '打印结果'
            }
          ]
        },
        {
          id: 9,
          name: '维护',
          erdata: [
            {
              id: 1,
              name: '维护'
            },
            {
              id: 2,
              name: '点击“采样针”'
            },
            {
              id: 3,
              name: '清洗采样针'
            },
            {
              id: 4,
              name: '整机浸泡'
            },
            {
              id: 5,
              name: '确认整机浸泡'
            }
          ]
        },
        {
          id: 10,
          name: '关机',
          erdata: [
            {
              id: 1,
              name: '关机'
            },
            {
              id: 2,
              name: '确认关机'
            }
          ]
        },
        {
          id: 11,
          name: '实验结束'
        }
      ],
      erstep: 1, // 在二级菜单 第一个展示当前所在的一级菜单名
      erstepshow: false, //二级菜单开启标识2
      eritem: 1, //当前所在二级步骤
      sjstep: 1,
      sjname: '',
      sjbox: false,
      bztext: '',
      tipstext: '',
      errortext: '',
      eritems: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    sjstep: {
      handler(i) {
        console.log('sjstep', i)
      },
      immediate: true,
      deep: true
    },
    sjbox: {
      handler(i) {
        console.log('sjbox', i)
      },
      immediate: true,
      deep: true
    },
    taskstep: {
      handler(i) {
        console.log('taskstep一级菜单步骤', i)
        if (i == 3 && this.eritem == 1) {
          this.bztext = '点击废液桶，检查桶内是否有液体。'
          this.$refs.seen.move(
            [0.687, 1.49, -2.845],
            [-2.68 / 180, -0.02 / 180, 0]
          )
          this.$refs.seen.twinklePoint(0.41, 1.395, -4.388)
        }
        if (i == 4 && this.eritem == 1) {
          this.bztext = '点击电源开关。'
          this.$refs.seen.move(
            [1.059, 1.316, -3.55],
            [-8.12 / 180, -1.25 / 180, -0.18 / 180]
          )
          this.$refs.seen.twinklePoint(1.282, 1.306, -4.335)
        }
        if (i == 5 && this.eritem == 1) {
          this.bztext = '点击“登录”按钮登录系统。'
          this.$refs.seen.move(
            [1.059, 1.316, -3.55],
            [-8.12 / 180, -1.25 / 180, -0.18 / 180]
          )
          this.$refs.seen.twinklePoint(1.282, 1.306, -4.335)
        }
      }
    },
    eritem: {
      handler(i) {
        console.log('二级菜单eritem值', i)
        if (this.taskstep == 3 && i == 1) {
          this.bztext = '点击废液桶，检查桶内是否有液体。'
          this.$refs.seen.move(
            [0.687, 1.49, -2.845],
            [-2.68 / 180, -0.02 / 180, 0]
          )
          this.$refs.seen.twinklePoint(0.41, 1.395, -4.388)
        }
        if (this.taskstep == 3 && i == 2) {
          this.bztext = '检查所有试剂的有效期。'
          this.$refs.seen.move(
            [1.887, 1.099, -4.593],
            [-38.59 / 180, 86.62 / 180, 38.54 / 180]
          )
          this.$refs.seen.twinklePoint(1.353, 1.208, -4.606)
        }
        if (this.taskstep == 3 && i == 3) {
          this.bztext = '检查试剂、废液桶的管路有无弯折，连接是否牢固。'
          this.$refs.seen.move(
            [0.953, 1.426, -5.778],
            [-170.45 / 180, 0.11 / 180, 179.98 / 180]
          )
          this.$refs.seen.twinklePoint(1.013, 1.499, -4.949)
        }
        if (this.taskstep == 3 && i == 4) {
          this.bztext = '检查主机的电源插头是否安全插入电源插座。'
          this.$refs.seen.move(
            [1.875, 0.58, -4.384],
            [-4.68 / 180, -0.59 / 180, -0.05 / 180]
          )
          this.$refs.seen.twinklePoint(1.948, 0.598, -5.111)
        }
      },
      immediate: true,
      deep: true
    }
    // eritems: {
    //   handler(i) {
    //     console.log('eritems', i)
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  //方法集合
  methods: {
    erjifn(i) {
      // this.sjbox = !this.sjbox
      // if (this.sjstep == 1) {
      //   this.sjbox = true
      // } else {
      // }
      this.eritem = i
      var flag = this.taskdata[this.taskstep - 1].erdata[i - 1].sandata
      // console.log('当前点击的二级菜单名称', this.sjname)
      // 判断一下当前是不是存在三级数据
      if (flag != undefined) {
        this.sjbox = !this.sjbox
      }
    },
    audioUrlfn(i) {
      this.audioUrl = i
    },
    taskfn(i) {
      this.taskstep = i
      this.erstep = i
      this.eritem = 1
      this.erstepshow = false
      console.log('taskstep', this.taskstep)
    },
    closefn() {
      this.erstep = 0
      this.erstepshow = true
      this.sjbox = false
      // console.log('现在二级', this.erstep)
    },
    eritemfn(i) {
      // this.sjstep = 1
      // 判断当前 二级菜单下是不是有三级菜单测试
      if (this.taskdata[this.taskstep - 1].erdata[i - 1].sandata) {
        this.sjstep = 1
      }

      this.eritem = i
    },
    tg() {
      this.$nextTick(() => {
        this.taskstep = 2
        this.erstep = 2
        console.log('this0', this.taskstep)
      })
    },
    bfwc(i) {
      console.log('播放完成', i)
      if (i == require('@/images/radio/hs1.mp3')) {
        this.$refs.jmcxbz.eritems = 2.5
      }
      if (i == require('@/images/radio/hz1.mp3')) {
        this.$refs.jmcxbz.eritemfn(3)
      }
    },
    eritemfns(i) {
      // this.eritem = i
      console.log('执行了', this.$refs.mfx.eritems)
      this.$refs.mfx.eritems = i
    },
    sjstepfn(i) {
      this.sjstep = i
    },
    tipstextfn(i) {
      // console.log('触发提示')
      this.tipstext = i

      this.timer = setTimeout(() => {
        // 暂未使用定时器

        if (i == '当前废液桶为空，请继续。') {
          this.eritem = 2
        }
        if (i == '所有试剂均检查完毕。') {
          this.eritem = 3
        }
        if (i == '所有连接管路完好。') {
          this.eritem = 4
        }
        if (i == '电源线及插座连接正常。') {
          this.taskfn(4)
        }
        if (i == '已开机') {
          this.taskfn(5)
        }
        this.tipstext = ''
        clearTimeout(this.timer)
      }, 1500)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.bgys {
  background-color: #02284b;
  width: 100%;
  height: 100%;
}
</style>
